<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
            width: 100px;
            height: 100px;
            left: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <div></div>
    <script>
        var odiv = document.getElementsByTagName('div')[0]
        function getStyle(ele,arr){
            if(window.getComputedStyle) {
                return getComputedStyle(ele)[arr]
            }else {
                return currentStyle.ele[arr]
            }
        }
        document.onkeydown = function(ev){
            switch(ev.keyCode) {
                // 左
                case 37:         
                    odiv.style.left = parseInt(getStyle(odiv,'left'))-5<=0?0+'px':parseInt(getStyle(odiv,'left'))-5+'px';
                break;

                // 右
                case 39:
                    // 可移动宽度 = 浏览器可视宽度-元素距离最近有定位元素的父元素或浏览器的宽度 
                    var rightMove = document.documentElement.clientWidth - odiv.offsetWidth
                    // 如果移动的宽度大于可移动宽度 停止移动
                    odiv.style.left = parseInt(getStyle(odiv,'left'))+5>=rightMove?rightMove+'px':parseInt(getStyle(odiv,'left'))+5 +'px';
                break;


                // 上
                case 38:         
                    odiv.style.top = parseInt(getStyle(odiv,'top'))-5<=0?0+'px':parseInt(getStyle(odiv,'top'))-5+'px';
                break;

                // 下
                case 40:
                    // 可移动高度 = 浏览器可视高度-元素距离最近有定位元素的父元素或浏览器的高度
                    var rightMove = document.documentElement.clientHeight - odiv.offsetHeight
                    // 如果移动的高度大于可移动高度 停止移动
                    odiv.style.top = parseInt(getStyle(odiv,'top'))+5>=rightMove?rightMove+'px':parseInt(getStyle(odiv,'top'))+5 +'px';
                break;
            }
        }
    </script>   
</body>
</html>